<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-tabs v-model:activeKey="menuLoginSideTabsActiveKey" @change="menuLoginSideTabsChange">
        <a-tab-pane v-for="item in menuLoginSideTabsDictValueSet" :key="item.codeName" :tab="item.displayName"></a-tab-pane>
        <template #renderTabBar="{ DefaultTabBar, ...props }">
          <component
            :is="DefaultTabBar"
            v-bind="props"
            :style="{ zIndex: 1, background: '#fff', textAlign: 'center' }"
          />
        </template>
      </a-tabs>
      <a-row :gutter="12">
        <a-col :span="12">
          <a-card :bordered="false" :bodyStyle="{ border: '1px dashed #0000000f' }">
            <a-row>
              <a-col :span="6">
              </a-col>
              <a-col :span="18">
                <div :style="{ ...coreStyle.height(620) }">
                  <ScrollContainer>
                    <a-tree v-model:selectedKeys="menuTreeCurrentSelectData" :tree-data="menuTreeData" defaultExpandAll @select="menuTreeChangeSelect" @rightClick="menuTreeRightClick" v-if="menuTreeData.length">
                    </a-tree>
                  </ScrollContainer>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card :bordered="false" :bodyStyle="{ border: '1px dashed #0000000f' }">
            <a-form ref="menuFormRef" :model="menuFormModel" :rules="menuFormRules" labelAlign="left" layout="vertical">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="父级菜单" name="pid">
                    <!-- <a-input v-model:value="menuFormModel.pid" placeholder="输入父级Id" /> -->
                    <a-select v-model:value="menuFormModel.pid" optionFilterProp="title" show-search allowClear placeholder="请选择" :style="{ ...coreStyle.width('100%') }">
                      <a-select-option v-for="item in menuPidSelectData" :value="item.id" :key="item.id" :title="item.menuName + ' - ' + item.menuKey">
                        {{ item.menuName + ' - ' + item.menuKey }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="排序权重" name="weightOrder">
                    <a-input-number v-model:value="menuFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="菜单标识" name="menuKey">
                    <a-input v-model:value="menuFormModel.menuKey" placeholder="输入菜单标识" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="菜单名称" name="menuName">
                    <a-input v-model:value="menuFormModel.menuName" placeholder="输入菜单名称" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <!-- <a-form-item label="菜单类型" name="menuType">
                    <a-input v-model:value="menuFormModel.menuType" placeholder="输入菜单类型" />
                  </a-form-item> -->
                  <Dict v-model="menuFormModel.menuType" dictKey="menuType" formItemName="menuType" />
                </a-col>
                <!-- <a-col :span="12">
                  <a-form-item label="登录端" name="loginSide">
                    <a-input v-model:value="menuFormModel.loginSide" placeholder="输入登录端" />
                  </a-form-item>
                </a-col> -->
                <a-col :span="24">
                  <a-form-item label="描述" name="description">
                    <a-textarea v-model:value="menuFormModel.description" :rows="3" placeholder="输入描述" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
            <a-space>
              <a-button type="primary" ghost @click="menuAdd">
                <CoreIcon icon="carbon:add-alt" :size="14" />
                新增
              </a-button>
              <a-popconfirm title="确认删除？" placement="top" @confirm="menuDelete" v-if="menuTreeCurrentSelectData[0]">
                <a-button type="dashed" danger>
                  <CoreIcon icon="jam:delete" :size="14" />
                  删除
                </a-button>
              </a-popconfirm>
            </a-space>
            <a-space :style="{ ...coreStyle.floatRight }">
              <a-button @click="menuFormReset">
                <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                重置
              </a-button>
              <a-button type="primary" ghost :loading="menuFormSaveSubmitting" @click="menuFormSave">
                <CoreIcon icon="ant-design:save-outlined" :size="14" />
                保存
              </a-button>
            </a-space>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'
import type { CoreTree } from '/@/tool/CoreTree'

import { useDictStore } from '/@/store/modules/cn/core/dict/dictStore'

import type { DictValue } from '/@/model/cn/core/dict/eo/DictValue'
import type { DictQO } from '/@/model/cn/core/dict/qo/DictQO'
import type { DictAndValueVO } from '/@/model/cn/core/dict/vo/DictAndValueVO'

import { useMenuStore } from '/@/store/modules/cn/core/sign/menuStore'

import type { Menu } from '/@/model/cn/core/sign/eo/Menu'
import { toMenu } from '/@/model/cn/core/sign/eo/Menu'

import type { MenuQO } from '/@/model/cn/core/sign/qo/MenuQO'
import { toMenuQO } from '/@/model/cn/core/sign/qo/MenuQO'

import type { MenuVO } from '/@/model/cn/core/sign/vo/MenuVO'
import { toMenuVO } from '/@/model/cn/core/sign/vo/MenuVO'

import { ScrollContainer } from '/@/components/Container/index'

@Options({
  name: 'CoreMenu',
  components: {
    ScrollContainer,
  },
  computed: {
    ...mapStores(useCoreToolStore, useDictStore, useMenuStore),
  },
})
export default class CoreMenu extends Vue {

  menuLoginSideTabsActiveKey: string = 'Browser'

  menuLoginSideTabsDictValueSet: Array<DictValue> = []

  menuLoginSideTabsChange(activeKey) {
    this.menuTreeGetDataSet()
    this.menuFormReset()
  }

  menuTreeData: Array<CoreTree<any>> = []

  menuTreeCurrentSelectData: string[] = []

  menuTreeGetDataSet() {
    this.menuTreeData = []
    this.menuTreeCurrentSelectData = []
    this.menuStore.getMenuTreeDataByLoginSide(this.$toParam<MenuQO>({ loginSide: this.menuLoginSideTabsActiveKey, weightOrderAsc: 'y' } as MenuQO)).then((res: Res<CoreTree<any>>) => {
      if (res.succ) {
        this.menuTreeData = [ ...res.data ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.menuStore.query(this.$toParam<MenuQO>({ loginSide: this.menuLoginSideTabsActiveKey, weightOrderAsc: 'y' } as MenuQO)).then((res: Res<Menu>) => {
      if (res.succ) {
        this.menuPidSelectData = [ ...res.data ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  menuTreeChangeSelect(selectedKeys, e) {
    if (selectedKeys[0]) {
      this.menuStore.pk(this.$toParam<MenuQO>({ id: selectedKeys[0] } as MenuQO)).then((res: Res<Menu>) => {
        if (res.succ) {
          this.menuFormModel = { ...res.data[0] }
        } else {
          this.$message.error(res.msg, 6)
        }
      })
    }
  }

  menuTreeRightClick({event, node}) {
    this.menuFormReset()
    this.menuStore.query(this.$toParam<MenuQO>({ loginSide: this.menuLoginSideTabsActiveKey, weightOrderAsc: 'y' } as MenuQO)).then((res: Res<Menu>) => {
      if (res.succ) {
        this.menuPidSelectData = [ ...res.data ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.menuFormModel.menuType = 'menu'
    this.menuFormModel.loginSide = this.menuLoginSideTabsActiveKey
    if (node.value) {
      this.menuFormModel.pid = node.value
    }
  }

  menuFormSaveSubmitting: boolean = false

  menuFormModel: Menu = toMenu()

  menuFormRules: object = {
    menuKey: [
      { type: 'string', required: true, message: '菜单标识不能为空！', trigger: ['change', 'blur'] },
    ],
    menuName: [
      { type: 'string', required: true, message: '菜单名称不能为空！', trigger: ['change', 'blur'] },
    ],
    menuType: [
      { type: 'string', required: true, message: '菜单类型不能为空！', trigger: ['change', 'blur'] },
    ],
    // loginSide: [
    //   { type: 'string', required: true, message: '登录端不能为空！', trigger: ['change', 'blur'] },
    // ],
    // description: [
    //   { type: 'string', required: true, message: '描述不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
    // pid: [
    //   { type: 'string', required: true, message: '父级Id不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  menuPidSelectData: Array<Menu> = []

  menuFormReset() {
    if (this.$refs.menuFormRef) {
      this.$refs.menuFormRef.resetFields()
      this.menuFormModel = toMenu()
      this.menuFormModel.loginSide = this.menuLoginSideTabsActiveKey
    }
  }

  menuFormSubmit() {
    this.menuFormSaveSubmitting = true
    this.$refs.menuFormRef.validate().then(() => {
      if (this.menuFormModel.id) {
        this.menuStore.update(this.$toParam<Menu>(this.menuFormModel)).then((res: Res<Menu>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.menuFormReset()
            this.menuFormSaveSubmitting = false
            this.menuTreeGetDataSet()
            this.menuFormModel.menuType = 'menu'
            this.menuFormModel.loginSide = this.menuLoginSideTabsActiveKey
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.menuFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.menuFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.menuStore.save(this.$toParam<Menu>(this.menuFormModel)).then((res: Res<Menu>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.menuFormReset()
            this.menuFormSaveSubmitting = false
            this.menuTreeGetDataSet()
            this.menuFormModel.menuType = 'menu'
            this.menuFormModel.loginSide = this.menuLoginSideTabsActiveKey
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.menuFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.menuFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.menuFormSaveSubmitting = false }, 3000)
    })
  }

  menuFormSave() {
    this.menuFormSubmit()
  }

  menuAdd() {
    this.menuFormReset()
    this.menuStore.query(this.$toParam<MenuQO>({ loginSide: this.menuLoginSideTabsActiveKey, weightOrderAsc: 'y' } as MenuQO)).then((res: Res<Menu>) => {
      if (res.succ) {
        this.menuPidSelectData = [ ...res.data ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.menuFormModel.menuType = 'menu'
    this.menuFormModel.loginSide = this.menuLoginSideTabsActiveKey
    if (this.menuTreeCurrentSelectData[0]) {
      this.menuFormModel.pid = this.menuTreeCurrentSelectData[0]
    }
  }

  menuDelete() {
    this.menuStore.remove(this.$toParam<Menu>({ id: this.menuTreeCurrentSelectData[0] } as Menu)).then((res: Res<Menu>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.menuTreeGetDataSet()
        this.menuFormReset()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.dictStore.getDictAndValueByDictKey(this.$toParam<DictQO>({ dictKey: 'loginSide' } as DictQO)).then((res: Res<DictAndValueVO>) => {
      if (res.succ) {
        this.menuLoginSideTabsDictValueSet = [ ...res.data[0].dictValue ]
      } else {
        this.$message.error(res.msg, 6)
      }
    })
    this.menuTreeGetDataSet()
    this.menuFormModel.loginSide = this.menuLoginSideTabsActiveKey
  }

}
</script>

<style scoped lang="less">

</style>
